<template>
<div class="app-container">
    <el-tabs v-model="activeName">
        <el-tab-pane label="基本设置" name="website">
            <el-form :model="website" ref="websiteForm" label-width="120px" label-position="left" class="demo-ruleForm">
                <el-form-item label="系统名称" prop="name">
                    <el-input v-model="website.name" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="Logo" prop="logo">
                    <el-upload class="avatar-uploader" :action="uploadAction" :headers="uploadHeader" :show-file-list="false" :on-success="uploadSuccess" :before-upload="validateUpload">
                        <img v-if="website.logo" :src="website.logo" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="关键字" prop="keyword">
                    <el-input v-model="website.keyword" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="description">
                    <el-input type="textarea" v-model="website.description" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="ICP" prop="icp">
                    <el-input v-model="website.icp"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="saveDrawer('websiteForm')">保存</el-button>
                </el-form-item>
            </el-form>
        </el-tab-pane>
        <el-tab-pane label="登录限制" name="login">
            <el-form :model="login" ref="loginForm" label-width="120px" label-position="left" class="demo-ruleForm">
                <el-form-item label="白名单" prop="white">
                    <el-input type="textarea" v-model="login.white" placeholder="不同IP请换行"></el-input>
                </el-form-item>
                <el-form-item label="黑名单" prop="black">
                    <el-input type="textarea" v-model="login.black" placeholder="不同IP请换行"></el-input>
                </el-form-item>
                <el-form-item label="短信验证码" prop="message_code">
                    <el-select v-model="login.message_code">
                        <el-option label="开启" :value="1"></el-option>
                        <el-option label="关闭" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="图片验证码" prop="image_code">
                    <el-select v-model="login.message_code">
                        <el-option label="开启" :value="1"></el-option>
                        <el-option label="关闭" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="错误次数" prop="incorrect_times">
                    <el-input v-model="login.incorrect_times" placeholder=""></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="saveDrawer('loginForm')">保存</el-button>
                </el-form-item>
            </el-form>
        </el-tab-pane>
        <el-tab-pane label="上传限制" name="upload">
            <el-form :model="upload" ref="uploadForm" label-width="120px" label-position="left" class="demo-ruleForm">
                <el-form-item label="格式限制" prop="ext">
                    <el-input v-model="upload.ext" placeholder="逗号隔开"></el-input>
                </el-form-item>
                <el-form-item label="文件大小" prop="size">
                    <el-input v-model="upload.size" placeholder="字节"></el-input>
                </el-form-item>
                <el-form-item label="CDN" prop="cdn">
                    <el-input v-model="upload.cdn" placeholder="cdn"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="saveDrawer('uploadForm')">保存</el-button>
                </el-form-item>
            </el-form>
        </el-tab-pane>
        <el-tab-pane label="短信配置" name="text_message">
            <el-form :model="text_message" ref="textMessageForm" label-width="120px" label-position="left" class="demo-ruleForm">
                <el-form-item label="APPKey" prop="access_key_id">
                    <el-input v-model="text_message.access_key_id" placeholder="阿里云短信配置"></el-input>
                </el-form-item>
                <el-form-item label="APPSecret" prop="access_key_secret">
                    <el-input v-model="text_message.access_key_secret" placeholder="阿里云短息配置"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="saveDrawer('textMessageForm')">保存</el-button>
                </el-form-item>
            </el-form>
        </el-tab-pane>
        <el-tab-pane label="企业微信" name="work_wechat">
            <el-form :model="work_wechat" ref="workWechatForm" label-width="120px" label-position="left" class="demo-ruleForm">
                <el-form-item label="AgentId" prop="agent_id">
                    <el-input v-model="work_wechat.agent_id" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="CorpId" prop="corp_id">
                    <el-input v-model="work_wechat.corp_id" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="Secret" prop="secret">
                    <el-input v-model="work_wechat.secret" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="RedirectUri" prop="redirect_uri">
                    <el-input v-model="work_wechat.redirect_uri" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="Admin" prop="admin">
                    <el-input v-model="work_wechat.admin" placeholder=""></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="saveDrawer('workWechatForm')">保存</el-button>
                </el-form-item>
            </el-form>
        </el-tab-pane>
        <el-tab-pane label="公众号配置" name="official_account">
            <el-form :model="official_account" ref="officialAccountForm" label-width="120px" label-position="left" class="demo-ruleForm">
                <el-form-item label="AppId" prop="appid">
                    <el-input v-model="official_account.appid" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="AppSecret" prop="secret">
                    <el-input v-model="official_account.secret" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="Token" prop="token">
                    <el-input v-model="official_account.token" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="AesKey" prop="aes_key">
                    <el-input v-model="official_account.aes_key" placeholder=""></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="saveDrawer('officialAccountForm')">保存</el-button>
                </el-form-item>
            </el-form>
        </el-tab-pane>
        <el-tab-pane label="小程序配置" name="mini_program">
            <el-form :model="mini_program" ref="miniProgramForm" label-width="120px" label-position="left" class="demo-ruleForm">
                <el-form-item label="AppId" prop="appid">
                    <el-input v-model="mini_program.appid" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="APPSecret" prop="secret">
                    <el-input v-model="mini_program.secret" placeholder=""></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="saveDrawer('miniProgramForm')">保存</el-button>
                </el-form-item>
            </el-form>
        </el-tab-pane>
    </el-tabs>
</div>
</template>

<script>
const ruleForm = {};
import {
    getToken
} from '@/utils/auth';

import {
    readSystemCfgApi,
    saveSystemCfgApi
} from "@/api/system/system";
export default {
    data() {
        return {
            rules: {},
            website: {
                name: "",
                logo: "",
                keyword: "",
                description: "",
                icp: "",
            },
            login: {
                white: "",
                black: "",
                message_code: 0,
                image_code: 0,
                incorrect_times: 5,
            },
            upload: {
                ext: "png,jpg,jpeg,gif,bmp,csv,xls,xlsx",
                size: 2048000,
                catalog: "./uploads",
                compress: 0,
                cdn: "",
                filename: "hash",
            },
            text_message: {
                access_key_id: "",
                access_key_secret: "",
            },
            dingding: {
                agent_id: "",
                corp_id: "",
                app_key: "",
                app_secret: "",
            },
            work_wechat: {
                agent_id: "",
                secret: "",
                corp_id: "",
                redirect_uri: "",
                admin: "",
            },
            official_account: {
                appid: "",
                secret: "",
                token: "",
                aes_key: "",
            },
            mini_program: {
                appid: "",
                secret: "",
            },
            activeName: "website",
        };
    },
    computed: {
        uploadAction: function () {
            return process.env.VUE_APP_BASE_API + '/api/system.file/upload';
        },
        uploadHeader: function () {
            let header = {};
            header["X-Token"] = getToken();

            return header;
        }
    },
    created() {
        this.readSystemCfg();
    },
    methods: {
        readSystemCfg() {
            readSystemCfgApi({}).then((res) => {
                const {
                    website,
                    login,
                    upload,
                    text_message,
                    dingding,
                    work_wechat,
                    official_account,
                    mini_program
                } = res.data;
                this.website = website;
                this.login = login;
                if(upload) this.upload = upload;
                if(text_message) this.text_message = text_message;
                if (dingding) this.dingding = dingding;
                if (work_wechat) this.work_wechat = work_wechat;
                this.official_account = official_account;
                this.mini_program = mini_program;
            });
        },
        saveDrawer(ref) {
            let options = {
                type: this.activeName,
                data: this[this.activeName]
            };

            saveSystemCfgApi(options).then(res => {
                if (res.code == '200') {
                    this.readSystemCfg();
                    this.$message.success(res.msg);
                } else {
                    this.$message.error(res.msg);
                }
            })
        },
        uploadSuccess(res, file) {
            this.website.logo = res.data.path;
        },
        validateUpload(file) {
            const isJPG = file.type === 'image/jpeg' || file.type == 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG,PNG 格式!');
            }

            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        }
    }
};
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
